<template>
  <div class="city_item" @click="onChangeSelectorCity">
    <span class="city_name">{{ cityName }}</span>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  name: 'CityItem',
  props: {
    cityId: [String, Number],
    cityName: String
  },
  methods: {
    ...mapMutations(['selectCity']),

    // 改变当前选择的城市
    onChangeSelectorCity () {
      console.log({
        cityId: this.cityId,
        cityName: this.cityName
      });
      this.selectCity({
        cityId: this.cityId,
        cityName: this.cityName
      })
      // 跳转首页
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
// 这样写的好处是变量
@import '@/assets/style/mixins.scss';
@import '@/assets/style/variables.scss';

.city_item {
  @include flex-row;
    align-items: center;
    height: $headerHeight;
    font-size: .16rem;
    margin-top: .01rem;
    padding-left: .1rem;
    background-color: #fff;
}
</style>